<template>
    <view class="viewport">
      <!-- 地址信息 -->
      <view class="form">
        <view class="form-item">
          <text class="label">姓名</text>
          <input
            v-model="form.receiver"
            placeholder-style="color: #888"
            placeholder="请填写收货人姓名"
          />
        </view>
        <view class="form-item">
          <text class="label">手机号码</text>
          <input
            v-model="form.contact"
            placeholder-style="color: #888"
            placeholder="请填写收货人手机号码"
          />
        </view>
        <view class="form-item">
          <text class="label">省/市/县 (区)</text>
          <picker @change="regionChange" mode="region">
            <view v-if="form.fullLocation" class="region">
              {{ form.fullLocation }}
            </view>
            <view v-else class="placeholder"> 请填写收货人所在城市 </view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">详细地址</text>
          <input
            v-model="form.address"
            placeholder-style="color: #888"
            placeholder="街道、楼牌号信息"
          />
        </view>
        <view class="form-item">
          <text class="label">设置默认地址</text>
          <switch
            @change="isDefaultChange"
            :checked="form.isDefault === 1"
            color="#27ba9b"
          />
        </view>
      </view>
      <!-- 提交按钮 -->
      <view class="button" @tap="submitForm"> 保 存 </view>
    </view>
  </template>
  
  <script>
  import { postMemberAddress,getMemberAddressDetail,putMemberAddress } from "@/api/address";
  export default {
    data() {
      return {
        form: {
          /**
           * 详细地址
           */
          address: "",
          /**
           * 地址标签,以英文逗号分割
           */
          addressTags: "",
          /**
           * 所在城市编码
           */
          cityCode: "",
          /**
           * 联系方式
           */
          contact: "",
          /**
           * 所在区/县编码
           */
          countyCode: "",
          /**
           * 是否为默认，1为是，0为否
           */
          isDefault: 0,
          /**
           * 邮政编码
           */
          postalCode: "",
          /**
           * 所在省份编码
           */
          provinceCode: "",
          /**
           * 收货人姓名
           */
          receiver: "",
          fullLocation: "",
        },
      };
    },
    async onLoad({ id }) {
    // 如果有id  编辑
    if (id) {
      // 编辑
      // 修改页面的标题
      uni.setNavigationBarTitle({ title: "编辑地址" });
      // 根据id 来发送请求 获取id对应地址详情数据
      const res = await getMemberAddressDetail(id);
      // 把获取到底数据 设置到 data中 - 页面就显示出数据
      this.form = res.result;
      // 最后 考虑在 保存按钮中  来区分 新建还是编辑
    } else {
      // 新建
      // 修改页面的标题
      uni.setNavigationBarTitle({ title: "新建地址" });
    }
  },
    methods:{
        // 省市区 地址选择
        regionChange(ev){
            this.form.provinceCode = ev.detail.code[0]
            this.form.cityCode = ev.detail.code[1]
            this.form.countyCode = ev.detail.code[2]
            // 邮政编码
            this.form.postalCode = ev.detail.postcode
            this.form.fullLocation = ev.detail.value.join("")
        },
        // 默认地址设置
        isDefaultChange(ev){
            this.form.isDefault =ev.detail.value ? 1 : 0
        },
        async submitForm(){
                        /* 
            1 获取表单的数据
            2 进行表单的验证
            3 调用接口 完成新增
            4 提示恭喜用户
            5 延时一会 返回上一个页面 
            */
           const params ={...this.form}
           delete params.addressTags
           delete params.fullLocation
             // 判断当前是 编辑-保存 还是 新增-保存 根据id来判断
           if ( this.form.id) {
               // 编辑 - 保存
        // 删除掉 params中id
            delete params.id
            const res = await putMemberAddress(this.form.id,params)
           uni.showToast({title:'编辑成功'})

           } else {
             // 新增 - 保存
        // 调用接口 发送请求 完成 新增
            const res =await postMemberAddress(params)
           uni.showToast({title:'新增成功'})
           }
           
           setTimeout(()=>{
            uni.navigateBack()
           },1500)
        },

    },
  };
  </script>
  
  <style lang="scss">
  page {
    background-color: #f4f4f4;
  }
  .form {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
    .form-item {
      display: flex;
      min-height: 96rpx;
      line-height: 46rpx;
      padding: 25rpx 10rpx;
      background-color: #fff;
      font-size: 28rpx;
      border-bottom: 1rpx solid #ddd;
      position: relative;
      &:last-child {
        border: none;
      }
      .label {
        width: 200rpx;
        color: #333;
      }
      input {
        flex: 1;
        display: block;
        height: 46rpx;
      }
      switch {
        position: absolute;
        right: -10rpx;
        transform: scale(0.7) translateY(-8px);
      }
      picker {
        flex: 1;
      }
      .region {
        color: #333;
      }
      .placeholder {
        color: #888;
      }
    }
  }
  .button {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: #27ba9b;
  }
  </style>
  